<template>
  <div class="container">
     <div class="jisuan">
       <h3>计算器</h3>
    <input v-model="inpu1" placeholder="请输入第一个值">
      <select v-model="selected" style="text-align: center; font-size: 15px;">
          <option disabled value="">请选择</option>
          <option>+</option>
          <option>-</option>
          <option>*</option>
          <option>/</option>
          <option>%</option>
      </select>
      <input v-model="inpu2" placeholder="请输入第二个值">
      <button id="btn" @click="fun">等于</button>&emsp;
      <span id="result">{{spa}}</span>
      <br/><br/>
      <button v-text="daojishi" @click="settime"></button>
      <h1>{{laodong}}</h1>
  </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
       inpu1: parseInt(0),
       inpu2: parseInt(0),
       selected: "+",
       spa: 0,
       daojishi:"点击显示距离5.1劳动节倒计时",
       laodong:"",
       timer:""
    }
  },
  methods:{

    fun:function(){
         switch (this.selected) {
             case '+':
                this.spa = (+this.inpu1) + (+this.inpu2)
                 break;
             case '-':
                this.spa =  (+this.inpu1) - (+this.inpu2)
                 break;
             case '*':
                this.spa=  (+this.inpu1) * (+this.inpu2)
                 break;
             case '/':
                this.spa=  (+this.inpu1) / (+this.inpu2)
                 break;
             case '%':
                this.spa=  (+this.inpu1) % (+this.inpu2)
                 break;
             default:'输入错误'

            } 
    },
    
   timefun() {
        var now = new Date() * 1; //获取现在时间戳
        var xin = new Date(2022, 4, 1) * 1; //设置倒计时终止时间戳
       // console.log(xin)
       //  var xin1 = new Date('2022-05-01 00:00:00').getTime();
          // console.log(xin1)
        var cha = xin - now; //差值 相差时间 时间戳
        var t = 24 * 60 * 60 * 1000; //天换毫秒
        var h = 60 * 60 * 1000; //小时换毫秒
        var f = 60 * 1000; //分钟换毫秒
        var s =1000 //毫秒
        var tt=Math.floor(cha/t)//天
        var hh=Math.floor(cha%t/h)//时
        var ff=Math.floor(cha%h/f)//分
        var ss=Math.floor(cha%f/s)//秒
        //console.log(tt,hh,ff,ss)
        this.laodong=`距离5.1劳动节倒计时还有${tt}天${hh}小时${ff}分${ss}秒`

     },
     settime(){
  //需要维护一个 this 上下文的时候，就可以使用箭头函数。 箭头函数里面没有 this 对象， 此时的 this 是外层的 this 对象，即 Window 
     /* 方法一 */
      // setInterval(()=>{ //箭头函数没有this指向，此时的this是vue获取方法的格式
      //    this.timefun()
      //   },1000)
      /* 方法二 */
         let timer = this 
        setInterval(function(){ //普通函数有this这一属性，所以无法直接添加vue格式里的this=》这样是找不到timefun()方法，在外面声明一个变量等于this，代替这个方法的this，即可获取timefun()执行
           timer.timefun()
        },1000)
     },
   
  },
  
}
</script>

<style scoped>

</style>

